<template>
    <!-- 加载动画 -->
    <view class='loading' :class='{on: load_show}' v-if='loading_show'>
        <view v-if='status == 1'>
            <image src='../../static/img/loading.svg' mode='widthFix'></image>
            <text>正在加载...</text>
        </view>
        <view class='success' v-if='status == 2'>
            <text>更新成功</text>
        </view>
        <view class='err' v-if='status == 3'>
            <text>加载失败</text>
        </view>
        <view class='err' v-if='status == 4'>
            <text>请求超时，请稍后重试</text>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            status: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                load_show: false,
                loading_show: false,
            }
        },
        watch: {
            status(val){
                switch(val) {
                    case 0:
                         
                    break;
                    case 1:
                        this.show()
                    break;
                    case 2:
                        this.hide()
                    break;
                    case 3:
                        this.hide()
                    break;
                    case 4:
                        
                    break;
                }
            }
        },
        methods: {
            show() {
                this.loading_show = true;
                setTimeout(() => {
                    this.load_show = true;
                },50)
            },
            hide() {
                setTimeout(() => {
                    this.load_show = false;
                    setTimeout(() => {
                        this.loading_show = false;
                    },300)         
                },2000)
            }
        }
    }
</script>

<style lang="scss" scoped>
.loading {
    width: 100%;
    height: 0upx;
    background: #fff;
    overflow: hidden;
    transition: all .3s;
    >view {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24upx;
        color: #0084FF;
        >image {
            width: 40upx;
            margin-right: 20upx;
        }
    }
    .success {
        color: #09BB03;
    }
    .err {
        color: #f00;
        background: rgba(255,0,0,.2);
    }
}
.on {
    height: 60upx;
}
</style>